<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/index.css" />
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        main {
            width: 100%;
            height: 100%;
            background: url('image/bg.png') center center no-repeat;
            background-size: 100% 100%;
        }

        .relative {
            position: relative;
        }

        .absolute {
            position: absolute;
        }

        .login {
            right: 10%;
            /*top: 30%;*/
            top: 50%;
            width: 478px;
            height: 478px;
            background-color: rgba(255, 255, 255, .5);
            box-shadow: 3px 3px 10px rbga(0, 0, 0, .8);
            transform: translate(0, -50%);
            -webkit-transform: translate(0, -50%);
            -moz-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
        }

        .login .title {
            color: white;
            line-height: 110px;
            font-size: 22px;
        }

        .login .input {
            color: #2a2a2a;
            line-height: 56px;
            font-size: 18px;
            margin-bottom: 29px;
        }

        .login .input label {
            left: 5%;
            color: #2a2a2a;
            font-weight: 500;
        }

        .login .input input {
            text-indent: 2.5em;
            height: 56px;
            line-height: 56px;
            border: 0;
            border-radius: 5px;
            outline: none;
            border: 1px solid #fff;
        }

        .login .falut {
            color: #850c10;
            line-height: 20px;
        }

        .login .btn {
            margin-top: 35px;
            color: white;
            line-height: 56px;
            font-size: 24px;
        }

        .login .btn button {
            background-color: #850c10;
            line-height: 56px;
            font-size: 24px;
            border: 0;
            border-radius: 5px;
        }

        .login .register {
            text-align: right;
        }

        .login .register a {
            background-color: transparent;
            color: white;
            border: none;
            margin-left: 20px;
        }
    </style>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.js"></script>
    <!--<script src="js/index.js"></script> -->
</head>

<body>
    <main class="relative">
        <div class="login absolute container">
            <div class="title col-lg-12">用户登录</div>
            <div class="input col-lg-12 relative">
                <input type="text" class="col-lg-12 account">
                <label class="absolute">账号:</label>
            </div>
            <div class="input col-lg-12 relative">
                <input type="password" class="col-lg-12 password">
                <label class="absolute">密码:</label>
            </div>
            <div class="col-lg-12 relative">
                <label class="falut"></label>
            </div>
            <div class="btn col-lg-12">
                <button class="col-lg-12 login_btn">登录</button>
            </div>
            <div class="register col-lg-12">
                <!--<a href="register.html" class="register_btn">注册</a>-->
                <a href="editpwd.html" class="editpwd_btn">修改密码</a>
            </div>
            <!-- <div class="forgetpsw col-lg-12">
                <a href="forgetpwd.html" class="forgetpsw_btn">忘记密码？</a>
            </div> -->
        </div>
    </main>
    <script>
        localStorage.clear();
        sessionStorage.clear();
        $('.login_btn').on('click', function () {
            $('.falut').html('');
            var account = $('.account').val();
            var password = $('.password').val();
            if (account == '' && password == '') {
                $('.account,.password').css('border', '1px solid #850c10');
                $('.falut').html('账号,密码均不能为空！');
            } else if (account == '' && password != '') {
                $('.account').css('border', '1px solid #850c10');
                $('.password').css('border', '1px solid #fff');
                $('.falut').html('账号不能为空！');
            } else if (account != '' && password == '') {
                $('.account').css('border', '1px solid #fff');
                $('.password').css('border', '1px solid #850c10');
                $('.falut').html('密码不能为空！');
            } else {
                var url = '/api/user_login?user_name=' + account + '&&user_pwd=' + password;
                $.ajax({
                    type: 'POST',
                    url: url,
                    success: function (res) {
                        if (res['errmsg'] != undefined) {
                            $('.falut').html(res['errmsg']);
                        } else {
                            localStorage.setItem('name', res["name"]);
                            localStorage.setItem('user_name', res["user_name"]);
                            localStorage.setItem('user_right', res["trial_first"] - 0 ? "trial_first" : (res["trial_second"] - 0 ? "trial_second" : (res["trial_third"] - 0 ? "trial_third" : (res["trial_forth"] - 0 ? "trial_forth" : ''))));
                            localStorage.setItem('division_code', res["division_code"]);
                            localStorage.setItem('career', res["career"]);
                            localStorage.setItem('modal_right',res['modal_right']);
                            window.location.href = 'index.html';
                        }

                    },
                    error: function (res) {
                        $('.falut').html(res.responseText);
                    }
                })
            }
        })
        $('body').on('keypress', function (e) {
            if (e.keyCode == '13') $('.login_btn').click();
        })
    </script>
</body>

</html>